<template>
    <div class="main-container"  :class="wrap?'main-wrap-container':'main-no-wrap-container'" id="search-mixin-id">
    <main-content :title="contentTitle" >
        <div slot="search">
          <!-- 在此处放置搜索内容 -->
          <div :class="[!searchFlag ? 'searchBox' : '']">
            <el-form label-width="70px" style="display: inline-block; margin-right: 70px;">
              <el-form-item label="姓名" style="display: inline-block;">
                <el-input
                  v-model="searchParam.identify_name"
                  size="small"
                  placeholder="请输入姓名"
                  style="width:200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="房号" style="display: inline-block;">
                <el-input
                  v-model="searchParam.room_number"
                  size="small"
                  placeholder="请输入房号"
                  style="width:200px"
                ></el-input>
              </el-form-item>
              <el-form-item label="年份" label-width="50px" style="display: inline-block;">
                <el-select
                  v-model="searchParam.year"
                  filterable
                  clearable
                  style="width:200px"
                  placeholder="请选择年份"
                >
                  <el-option
                    v-for="(item,index) in year_Option"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
        	  <el-form-item label="月份" label-width="50px" style="display: inline-block;">
        	    <el-select
        	      v-model="searchParam.month"
        	      filterable
        	      clearable
        	      style="width:200px"
        	      placeholder="请选择月份"
        	    >
        	      <el-option
        	        v-for="(item,index) in month_Option"
        	        :key="index"
        	        :label="item.F_ItemName"
        	        :value="item.F_ItemValue"
        	      ></el-option>
        	    </el-select>
        	  </el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="searchClick"
                style="margin:4px 0px 0px 5px"
              >搜索</el-button>
              <el-button
                icon="el-icon-refresh"
                size="small"
                @click="searchReset"
                style="margin-top:4px;"
              >重置</el-button>
              <!-- 展开/收起功能按钮 -->
            </el-form>
          </div>
        </div>
        <div slot="table">
        <!-- 在此处放置表格内容 -->
            <avue-crud ref="total_water_and_electricity_expensesTable" :data="listData" :showColumn="showColumn" :isSaveColumns="true"  id="printTable" :option="option" stripe :page.sync="page"
                       @on-load="onPageLoad"
                       @row-dblclick="handleRowDBLClick"
                       @sort-change="sortChange" 
                       @current-row-change="handleCurrentRowChange" >
                <template slot-scope="scope" slot="menu"> 
                    <el-button type="opr-primary" size="mini"  icon="el-icon-view"  v-if="hasBtns('total_water_and_electricity_expenses:view')&&hasButtonPermission('total_water_and_electricity_expenses:view')" @click="viewForm(scope.row)">{{$t("crud.viewBtn")}}</el-button>
                    <el-button type="opr-primary" size="mini"  icon="el-icon-edit" v-if="hasBtns('total_water_and_electricity_expenses:modify')&&hasButtonPermission('total_water_and_electricity_expenses:modify')" @click="editForm(scope.row)">{{$t("crud.editBtn")}}</el-button>
                    <el-button type="opr-primary" size="mini"  icon="el-icon-delete" v-if="hasBtns('total_water_and_electricity_expenses:delete')&&hasButtonPermission('total_water_and_electricity_expenses:delete')" @click="deleteForm(scope.row)">{{$t("crud.delBtn")}}</el-button>
                </template>
                 <template slot="menuLeft">
                     <el-button type="primary"  v-if="hasButtonPermission('total_water_and_electricity_expenses:print')" icon="el-icon-printer" size="small" @click="printForm">{{$t("editorModule.print")}}</el-button>
                     <el-button type="primary"  v-if="hasButtonPermission('total_water_and_electricity_expenses:export')" icon="fa fa-sign-out" size="small" @click="tableExport()">{{$t("forme.editModal.quickExportBtn")}}</el-button>
                </template>
            </avue-crud>
            <el-dialog title="表单"  v-dialogDrag :append-to-body="true" :fullscreen="true" :visible.sync="flag"  :class="isWorkflowForm ? 'work-form-dialog' : ''" :show-close="!isWorkflowForm" >
                <total_water_and_electricity_expensesForm v-if="flag"  :isEdit="isEdit" :disabled="disabled" @onChange="dialogChange" :keyValue="keyValue"></total_water_and_electricity_expensesForm>
            </el-dialog>
        </div>
    </main-content>
    </div>
</template>
<script>
     import MainFixed from "@/page/main/MainFixed";
      import authorizeMixin from "@/mixins/authorize";
      import tableOptionMixin from "@/mixins/tableOption"; //table 高度计算
      import tableSearchMixin from "@/mixins/tableSearch"; //table 搜索 
      import displayColumnsMixin from "@/mixins/displayColumns"; //表格展示列显隐保存 
     import MainContent from "@/page/main/MainContent";
      import request from '@/router/axios';
      import { baseUrl } from '@/config/env';
      import { getOrder } from '@/util/util';
      import total_water_and_electricity_expensesForm from './total_water_and_electricity_expensesForm';
     export default {
         name: "total_water_and_electricity_expenses",
         mixins: [authorizeMixin,tableOptionMixin,tableSearchMixin,displayColumnsMixin],
         components: { MainContent, total_water_and_electricity_expensesForm,MainFixed },
         data() {
              return {
				 	  btns:[
				 	     'total_water_and_electricity_expenses:refresh',
				 	     'total_water_and_electricity_expenses:view',
				 	     'total_water_and_electricity_expenses:print',
				 	     'total_water_and_electricity_expenses:export'
                   ],
                   page: {
                       pageSize: 20,
                       total: 0,
                       currentPage: 1,
                       layout: "total, prev, pager, next, jumper"
                   },
                   listData: [],
                   keyValue: '',
                   flag:false,
				   searchParam: {
				   					   identify_name:"",
				   					   room_number:"",
				   					   year:"",
				   					   month:"",
				   },
                   isEdit: true, // 查看-不显示按钮,
                   disabled: false, // 查看-禁用input,
                   isWorkflowForm:false,//默认值 false
                   defaultOrderfield:'',//默认排序字段
                   defaultOrder:'',//默认排序
                   searchParam: {},
                   defaultProps: {
                       children: 'children',
                       label: ''
                   },
				   yearlist:[],
				   monthlist:[],
				   year_Option:[],
				   month_Option:[],
                   option:{
                       rowKey:'F_Id',
                       highlightCurrentRow: true,
                       stripe: true,
                       addBtn: false,
                       tip:false,
                       menuWidth: 320,
                       border: true,
                       page: true,
                       index: true,
                       menu: false,
                       indexLabel: this.$t('custmerForm.tableNumber'),
                       align: 'center',
                       menuAlign: 'left',
                       delBtn: false,
                       editBtn: false,
                       column: [
						   {
						       sortable: true,
						       label: this.$t("房号"),
						       prop: 'room_number',
						       overHidden: true,
						   },
                           {
                               sortable: true,
                               label: this.$t("姓名"),
                               prop: 'identify_name',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("性别"),
                               prop: 'gender',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("身份证"),
                               prop: 'identify_id',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("部门"),
                               prop: 'department_name',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("入住日期"),
                               prop: 'checkin_date',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("年份"),
                               prop: 'year',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("月份"),
                               prop: 'month',
                               overHidden: true,
                           },
						   {
						       sortable: true,
						       label: this.$t("电表底数"),
						       prop: 'mineng',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("抄表数"),
						       prop: 'maxeng',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("实用数"),
						       prop: 'eng_reality',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("金额"),
						       prop: 'cost',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("热水底数(吨)"),
						       prop: 'heat_min_total',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("抄表数(吨)"),
						       prop: 'heat_max_total',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("实用数(吨)"),
						       prop: 'heat_water_reality',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("金额"),
						       prop: 'heat_water_cost',
						       overHidden: true,
						   },
                           {
                               sortable: true,
                               label: this.$t("冷水底数(吨)"),
                               prop: 'cold_min_total',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("抄表数(吨)"),
                               prop: 'cold_max_total',
                               overHidden: true,
                           },
                           {
                               sortable: true,
                               label: this.$t("实用数(吨)"),
                               prop: 'cold_water_reality',
                               overHidden: true,
                           },
						   {
						       sortable: true,
						       label: this.$t("金额"),
						       prop: 'cold_water_cost',
						       overHidden: true,
						   },
						   {
						       sortable: true,
						       label: this.$t("总费用"),
						       prop: 'total_cost',
						       overHidden: true,
						   },
                           // {
                           //     sortable: true,
                           //     label: this.$t("冷水单价"),
                           //     prop: 'cold_water_price',
                           //     overHidden: true,
                           // },
                           // {
                           //     sortable: true,
                           //     label: this.$t("热水单价"),
                           //     prop: 'heat_water_price',
                           //     overHidden: true,
                           // },
                           
                           
                           
                           // {
                           //     sortable: true,
                           //     label: this.$t("电费单价"),
                           //     prop: 'electricity_price',
                           //     overHidden: true,
                           // },
                           
                       ]
                   }
              }
                   },
                   created() {
                       //是否有编辑 查看 删除 发起流程 发起临时流程权限 无则为操作列不显示
                       let oprBtns = ['total_water_and_electricity_expenses:modify','total_water_and_electricity_expenses:view','total_water_and_electricity_expenses:delete','total_water_and_electricity_expenses:createFormFlow','total_water_and_electricity_expenses:createDesignFlow'];
                       let intersection = this.btns.filter((v) => oprBtns.includes(v)); 
                       if(intersection.length>0){
                       	this.option.menu =  false
                       }else{
                       	this.option.menu = false
                       }
                       
                       this.getsearch_Option();
                       this.getmonth_Option();
                       if(this.btns.length>0){
                       	let tempBtns =  this.btns.concat(oprBtns).filter((v) => this.btns.includes(v) && !oprBtns.includes(v));
                       	if(tempBtns.length>0){
                       		this.searchBtns  = [...new Set([...tempBtns])];
                       	}
                       }
                   },
                   methods: {
                         handleRowDBLClick (row, event) {
                         	if(this.hasBtns('total_water_and_electricity_expenses:modify')&&this.hasButtonPermission('total_water_and_electricity_expenses:modify')&&this.openDoubleClickEdit){
                         		this.editForm(row)
                         	}
                         },
                         handleCurrentRowChange(row){
                         	this.$refs.total_water_and_electricity_expensesTable.toggleSelection([row]);
                         },
                         printForm() {
                         	let element = window.document.getElementById("printTable");
                         	setTimeout(() => {
                         	  html2canvas(element, {
                         		backgroundColor: null,
                         		useCORS: true,
                         		windowHeight: document.body.scrollHeight
                         	  }).then(canvas => {
                         		const url = canvas.toDataURL();
                         		this.printImg = url;
                         		printJS({
                         		  printable: url,
                         		  type: "image",
                         		  documentTitle: '打印',
                         		  scanStyles: false,
                         		  repeatTableHeader: false,
                         		  header: null
                         		});
                          	  });
                         	}, 1);
                           },
                         hasBtns(encode){
                         	return this.btns.includes(encode);
                         },
                         /* 获取公司用户数据 */
                         getListData() {
                         	if(!this.searchParam.order){ 
                         		this.searchParam.orderfield = this.defaultOrderfield;
                         		this.searchParam.order = this.defaultOrder;
                         	}
                            // let params = this.changeSearchParams();
                            request({
                                url: baseUrl + '/electricity_cost_records_month/queryList',
                                method: 'get',
                                params: this.searchParam,
                            }).then(res =>{
                                this.listData = res.data.data.records
                                this.page.total = res.data.data.total;
								// console.log(res.data.data.records[6].cold_min_total)
								for(let i = 0; i<res.data.data.total;i++){
									if(res.data.data.records[i].cold_min_total){
										this.cold_min_total = res.data.data.records[i].cold_min_total/1000
										this.listData[i].cold_min_total = this.cold_min_total
									}
									if(res.data.data.records[i].cold_max_total){
										this.cold_max_total = res.data.data.records[i].cold_max_total/1000
										this.listData[i].cold_max_total = this.cold_max_total
									}
									if(res.data.data.records[i].heat_min_total){
										this.heat_min_total = res.data.data.records[i].heat_min_total/1000
										this.listData[i].heat_min_total = this.heat_min_total
									}
									if(res.data.data.records[i].heat_max_total){
										this.heat_max_total = res.data.data.records[i].heat_max_total/1000
										this.listData[i].heat_max_total = this.heat_max_total
									}
									if(res.data.data.records[i].heat_water_reality){
										this.heat_water_reality = res.data.data.records[i].heat_water_reality/1000
										this.listData[i].heat_water_reality = this.heat_water_reality
									}
									if(res.data.data.records[i].cold_water_reality){
										this.cold_water_reality = res.data.data.records[i].cold_water_reality/1000
										this.listData[i].cold_water_reality = this.cold_water_reality
									}
									
									// this.listData.heat_water_reality.push(res.data.data.Rows[i].heat_water_reality/1000)
										// console.log(this.heat_water_reality)
								}
                            })
                         },
						 getsearch_Option() {
							 const now = new Date();
							 const year = now.getFullYear();
							 console.log(year);
							 this.yearlist = [year-1,year,year+1];
							 console.log(this.yearlist)
							 this.year_Option= this.yearlist;
						   //  request({
						 								
						   //      url: baseUrl + '/electricity_cost_records_month/queryList',
						   //      method: 'get',
						        
						   //  }).then(res =>{
						 		// this.yearlist=[];
						 		// this.monthlist=[];
						 		// res.data.data.records.forEach((item)=>{
						 		// this.yearlist.push(item.year)							
						 		// })
						   //      this.year_Option = [...new Set(this.yearlist)];							 								
						   //  })
						 },
						 async getmonth_Option() {
						   // 注意：this.$axios是通过Vue.prototype.$axios = axios挂载产生的
						   try {
						     let resp = await this.$axios({
						       method: 'get',
						       url:  baseUrl + '/data-items/date_month/detail',
						     });
						     if (resp.data.data) {
						       this.month_Option = resp.data.data;
							   // console.log(this.month_Option)
						     }
						   }
						   catch (error) {}
						 },
                         /* 页面加载 */
                         onPageLoad(page) {
                            this.searchParam.limit = page.currentPage;
                            this.searchParam.size = page.pageSize;
                            this.getListData();

                         },
                          /*查看*/
                         viewForm(val) {
                           this.flag = true;
                           this.isEdit = false;
                           this.disabled = true;
                           this.keyValue = val.F_Id; 
                         },
                          /* 编辑 */
                         editForm(val) {
                           this.flag = true; 
                           this.isEdit = true;
                           this.disabled = false;
                           this.keyValue = val.F_Id; 
                         },
                          /* 打开表单 */
                         openForm(){
							  if(!this.isWorkflowForm){
                             //不处理工作流表单时候，表单类型重置
                             window.localStorage.setItem('systemFormType',0);
                           }
                           this.disabled = false;
                           this.keyValue = null; 
                           this.flag = true; 
                           this.isEdit = true; 
                         },
                          /* 删除 */
                         deleteForm(val) {
                            this.$confirm(this.$t("deletePrompt.promptContent"), this.$t("tip"), {
                              confirmButtonText: this.$t("buttonModule.modalSureBtn"),
                              cancelButtonText: this.$t("editorModule.cancel"),
                              type: "warning",
                             }).then(() => {
                                 request({
                                     url: baseUrl + "/total_water_and_electricity_expenses/" + val.F_Id,
                                     method: "delete",
                                 }).then((res) => {
                                     this.getListData()
                                     this.$notify({
                                      title: this.$t("Notice.hintSuccess"),
                                      message: this.$t("deletePrompt.successDeleted"),
                                      type: "success",
                                     });
                                 });
                             });
                         },
                          /* 分页 */
                         sortChange(data) {
                         	if(data.order){
                         		let order= getOrder(data.order);
                         		this.searchParam.order = order;
                         		this.searchParam.orderfield = data.prop;
                         	}else{
                         		this.searchParam.order = this.defaultOrder;
                         		this.searchParam.orderfield = this.defaultOrderfield;
                         	}
                         	this.getListData()
                         },
                          /* 弹窗回调 */
                          dialogChange(b){
                              this.flag = false;
                              this.$nextTick(()=>{
                              this.getListData();
                         })},
                          /* 导出 */
                          tableExport(){
							  	
							     request({
							         url: baseUrl + '/electricity_cost_records_month/export-file',
							         method: 'get',
							         params: this.searchParam,
							     }).then(res =>{
									 // const fileData = res.data;
									 // const blob = new Blob([fileData],{type:"application/octet-stream"});
          //                            const downloadUrl = URL.createObjectURL(res.data.data);
									 // const link = document.createElement("a");
									 // link.href = res.data.data;
									 // link.setAttribute("download", "data.xlsx");
									 // document.body.appendChild(link);
									 // link.click();
									 // document.body.removeChild(link);									 
									 
									 this.$export.excel({
									          // title: this.tableOption.title,
									          columns: this.option.column,
									         data: res.data.data
									       });
							         
							     })
							  
                            // this.$refs["total_water_and_electricity_expensesTable"].rowExcel()
                            // return;
                         },
                          /* 查询 */
                            searchClick(params) {
                             this.searchParam.limit = 1;
                             this.searchParam.order = null;
                             this.searchParam.orderfield = null;
                             this.getListData();
                          },
                            /* 查询表单重置 */
                            searchReset() {
                             this.searchParam.identify_name = null;
                             this.searchParam.room_number = null;
                             this.searchParam.year = null; 
                             this.searchParam.month = null;					  
                             this.getListData();
                             this.getsearch_Option();
                          },
         }
     }
</script>
<style scoped>
.searchBox {
   width: calc(100% - 218px);
   display: inline-block;
}
.main-container{
   height: 100%!important;
   padding: 0 8px!important;
}
div /deep/ .custom-tree-node span{
   font-size: 14px;
   padding-left: 10px;
}
div /deep/ .custom-tree-node i{
   font-size: 12px;
}
div /deep/ .el-dialog__body{
height: 70vh;
overflow: scroll;
}
</style>
